<template>
    <div id="app">

        <el-row>
            <el-col class="lala" :span="18" >
                <div class="grid-content bg-purple">
                    <div class="yq-banner">
                        <el-table :header-cell-style="{textAlign: 'center'}" :data="tableData" border stripe :header-cell-class-name="'headerBg'">
                            <el-table-column
                                    align="center"
                                    prop="id"
                                    label="序号"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="branch"
                                    label="支部名称">
                            </el-table-column>

                            <el-table-column
                                    align="center"
                                    prop="period"
                                    label="周期">
                            </el-table-column>

                            <el-table-column
                                    align="center"
                                    prop="sort"
                                    label="类别">
                            </el-table-column>

                            <el-table-column
                                    align="center"
                                    prop="number"
                                    label="数量">
                            </el-table-column>

                            <el-table-column
                                    align="center"
                                    label="状态">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.state==1" @click="submit(scope.row)" plain type="success">提交记录</el-button>
                                    <el-button v-if="scope.row.state==0" type="danger"  plain disabled >已经截止</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                </div>
            </el-col>

        </el-row>

        <!--添加-->
        <el-dialog
                title="添加"
                :visible.sync="dialogVisible"
                width="30%"
                @close="dialogClose">
            <!--:model绑定表单数据-->
            <el-form label-width="80px" :model="editForm" ref="addFormRef">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="editForm.content">
                    </el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
          </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "learnAndSubmit",
        data(){
            return{
                tableData: [],
                total: 0,
                currentPage: 1,
                pageSize: 5,
                ruleForm: {},
                editForm: {},
                dialogVisible: false,
                records:{}
            }
        },
        created() {
            this.currentPage=1;
            this.ruleForm.account=this.$route.query.account;
            this.ruleForm.name=this.$route.query.name;
            this.initTable();
        },
        methods:{
            add(){
                this.dialogVisible=false;
                this.editForm.account=this.ruleForm.account
                this.$http.post("/system/record/addRecord",this.editForm).then(rep=>{
                    if(rep.data.code == 200){
                        this.$message.success(rep.data.message);
                        this.$http.post("/system/meetingClass/updateUsed",this.records).then(res=>{

                        })
                       this.$router.push({path:'/resultSelect'});
                    }
                    else{
                        this.$message.error(rep.data.message);
                    }
                })
            },
            submit(e){
                this.dialogVisible=true;
                this.editForm.sort=e.sort;
                this.records.sort=e.sort;
                this.records.branch=e.branch;
                this.records.period=e.period
            },
            dialogClose(){
                this.dialogVisible=false;
                this.$refs.addFormRef.resetFields();
            },
            //分页
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val
                this.initTable();
            },

            initTable(){
                this.$http.post("/system/admin/accountName?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.ruleForm).then(resp=>{
                    console.log(resp);
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
            },
        }
    }
</script>

<style scoped>
    .imgl{
        float: left;
    }
    html,body,#app{
        width: 100%;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }
    .box-card{
        height: 380px;
    }
    * {
        /*margin: 0;*/
        padding: 0;
        list-style: none;
        font-family: '微软雅黑';}
    img {vertical-align: top;}
    a {text-decoration: none;}
    a:hover {text-decoration: none;color: #538191;}

    .el-col {border-radius: 4px;}
    .bg-purple-dark {background: #538191;}
    .bg-purple {background: #fff;}
    .grid-content { min-height: 100px;}

    /********header***********/
    .header{width: 350px;float: right;height: 100px;}

    .header ul li:first-child {border-left: 1px solid #e4e4e4;}

    .header ul li {
        margin-top: 10px;
        position: relative;
        width: 20%;
        text-align: center;
        font-size: 20px;
        list-style-type: none;
        float: left;
        border-right: 1px solid #e4e4e4;
    }

    .header ul li a {
        color: #333;
        font-size: 20px;
        display: block;
        height: 100px;
        position: relative;
        z-index: 1;
    }
    .header ul li a .icon-nav {
        width: 37px;
        height: 32px;
        margin: 20px 0 0 0;
        display: inline-block;
    }
    .header ul li:hover{
        background-color: #009994;
        color: #fff;
    }
    .header ul li a:hover{
        color: #fff;
    }
    .header .nav-txt {
        display: block;
        font-size: 16px;
    }

    /***********menu**********/
    .nav{
        margin:0 auto;
        height: 55px;
        position:relative;
        padding:25px 0px 0px 15px;
    }
    .nav li{
        width:135px;
        float: left;
        position: relative;
    }
    .nav li.line{
        width:1px;
        padding-top:15px;
        display:block;
    }
    .nav li>a{
        display: block;
        font-size:18px;
        color: #fff;
        height: 55px;
        line-height: 55px;
        text-align: center;
    }

    .nav li.on>a,.nav li:hover>a{
        background-color:#6b86a0;
        color:#ffffff;
        font-weight:normal!important;
        border-radius-left-top:2px ;
    }

    .nav li.on,.nav li:hover .two-nav{
        background: #6b86a0;
        display: block;
        padding-top: 0px;
        margin-top: -1px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .two-nav{
        position: absolute;
        left: 0px;
        width: 150px;
        margin-top:-1px;
        z-index: 990;
        display: none;
    }
    .two-nav a{
        display: block;
        height: 45px;
        line-height:45px;
        text-align: center;
        color: #ffffff;
        font-size: 15px;
        background: #6b86a0;
    }

    .two-nav a:hover{
        background: #538191;
    }

    .el-carousel__item h3 {
        opacity: 0.75;
        line-height: 644px;
        margin: 0;
    }

    /***********ztzl**********/
    .con_two{width:100%;margin-top:45px;}
    .jz {width: 1280px;margin: 0 auto;}
    /*服务*/
    .xy_fw{width:1280px;height:395px;}
    .xy_fw_nav{width:1280px;height:74px;line-height:74px;}
    .xy_fw_nav h1{width:150px;font-size:20px;color:#538191;border-bottom:4px #f29503 solid;margin:0 auto;text-align:center;text-indent:0em;}
    .xy_fw_nav h2{width:150px;font-size:20px;color:#538191;border-bottom:4px #f29503 solid;margin:0 auto;text-align:center;text-indent:2em;}

    .xy_fw_font{width:1280px;}
    .xy_fw_font ul li{width:426px;float:left;padding-top:37px;text-align: center;}
    .xy_fw_font ul li h1{width:100px;height:85px;padding-top:15px;;background:#538191;border-radius: 100px;text-align:center;margin:0 auto;}
    .xy_fw_font ul li h1 img{-webkit-transition:all 4s ease-in-out; width: 60px; padding-top: 10px}
    .xy_fw_font ul li h1 img:hover{-webkit-transform:rotate(360deg);
        -o-transform:rotate(360deg) ;
        -mo-transform:rotate(360deg) ;
        transform:rotate(360deg) ;}
    .xy_fw_font ul li span{line-height:46px;text-align:center;font-size:18px;}
    .post_bg {
        background: #e36521 !important;
    }

    /***********footer**********/
    #footer{width:100%;background:#538191;padding:20px 0px; height: 180px}
    .fot_bg{width:1300px;margin:0 auto;}
    .fot_bg_left{float:left;line-height:38px;padding:20px 0px;color:#ced6e4;padding-right:30px;}

    .fot_bg_left a{color:#fff!important;}
    .fot_bg_left span{pading-top:3px;}
    .fot_bg_mid{float:left;}
    .fot_bg_mid ul li{width:111px;float:left;padding-left:30px;text-align:center;}
    .fot_bg_mid ul li img{width:111px;height:111px;}
    .fot_bg_mid ul li span{line-height:50px;color:#fff;}


    .fot_bg_right{width:210px;float:left;}
    .fot_bg_right ul li{float:left;line-height:45px;padding-left:48px;font-size: 13px;}
    .fot_bg_right ul li a{color:#ced6e4;}



    /*******************/
    .yq-banner-inner {
        width: 100%;
        min-width: 1150px;
        height: 260px;
        display: block;
        text-align: center;
        background-size: cover;
        background: url(../../../../../assets/img/bg.png) no-repeat center center;
        background-size:100% 260px;
    }

    .gaga{
        margin: 10px auto;
    }
    .lala{
        width: 100%;}
</style>